<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单</title>


    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/menuindex.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap-iso.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/foot123.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/top123.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/page_nav.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/script/jquery-3.6.0.js"></script>
<%--    <Script type="text/javascript">--%>
<%--        $(function () {--%>
<%--            // 给加入购物车按钮绑定单击事件--%>
<%--            $("button.addToCart").click(function () {--%>
<%--                /**--%>
<%--                 * 在事件响应的function函数 中，有一个this对象，这个this对象，是当前正在响应事件的dom对象--%>
<%--                 * @type {jQuery}--%>
<%--                 */--%>
<%--                var menuId = $(this).attr("menuId");--%>
<%--                location.href = "http://localhost:8080/Restaurant/cartServlet?action=addItem&id=" + menuId;--%>
<%--            });--%>
<%--        });--%>
<%--    </Script>--%>
    <Script type="text/javascript">
        $(function () {
            // 给加入购物车按钮绑定单击事件
            $("button.addToCart").click(function () {
                /**
                 * 在事件响应的function函数 中，有一个this对象，这个this对象，是当前正在响应事件的dom对象
                 * @type {jQuery}
                 */
                var menuId = $(this).attr("menuId");
                $.post({
                    url:"${pageContext.request.contextPath}/user123/ajaxAddItem",
                    data:{'menuId':menuId},
                    success:function (data) {
                        var obj = JSON.parse(data);
                        $("#cartTotalCount").text("您的购物车中有 " + obj.totalCount + " 件商品");
                        // $("#cartTotalCount").html("您的购物车中有 " + data.totalCount + " 件商品");
                        $("#cartLastName").text(obj.lastName);
                    }

                });
            });

        });
    </Script>


</head>
<body>
<div id="header">
    <%@include file="../common/top.jsp" %>
</div>
<div id="container">
    <div id="photo">
        <div id="item1"></div>
        <div id="item2"></div>
        <div id="item3"></div>
        <div id="item4"></div>
        <div id="item5"></div>
    </div>
</div>
<div id="main">
    <div id="menu">
        <div class="menu_cond">
            <form action="${pageContext.request.contextPath}/user123/menuindexByPrice" method="get">
                <input type="hidden" name="pageNo" value="1">
                价格：<input id="min" type="text" name="min" value="${param.min}" required> 元 -
                <input id="max" type="text" name="max" value="${param.max}" required> 元
                <input type="submit" value="查询"/>
            </form>
        </div>
        <div style="text-align: center">

            <c:if test="${empty sessionScope.cart.items}">
                <%--购物车为空的输出--%>
                <span id="cartTotalCount"> </span>

                <span  id="cartLastName">当前购物车为空</span>
            </c:if>
            <c:if test="${not empty sessionScope.cart.items}">
                <%--购物车为非空的输出--%>
                <span id="cartTotalCount"> 您的购物车中有${sessionScope.cart.totalCount}件商品</span>
                <div>
                    您刚刚将<span style="color: red"  id="cartLastName">${sessionScope.lastName}</span>加入到了购物车中
                </div>
            </c:if>

        </div>

        <c:forEach items="${requestScope.page.items}" var="menu">
            <div class="menu_list">
                <div class="img_div">
                    <img class="menu_img" alt="" src="${pageContext.request.contextPath}/${menu.imgPath}"/>
                </div>
                <div class="menu_info">
                    <div class="menu_name">
                        <span class="sp1">菜名:</span>
                        <span class="sp2">${menu.name}</span>
                    </div>
                    <div class="menu_type">
                        <span class="sp1">类型:</span>
                        <span class="sp2">${menu.type}</span>
                    </div>
                    <div class="menu_price">
                        <span class="sp1">价格:</span>
                        <span class="sp2">￥${menu.price}</span>
                    </div>
                    <div class="menu_sales">
                        <span class="sp1">销量:</span>
                        <span class="sp2">${menu.sales}</span>
                    </div>
                    <div class="menu_amount">
                        <span class="sp1">库存:</span>
                        <span class="sp2">${menu.stock}</span>
                    </div>
                    <div class="menu_add">
                        <button menuId="${menu.id}" class="addToCart">加入购物车</button>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
    <div class="page123">  <%--静态包含分页条--%>
        <%@include file="../common/page_nav.jsp" %>
    </div>
</div>


<div class="foot123">
    <%--静态包含页脚内容--%>
    <%@include file="../common/foot.jsp" %>
</div>


</body>
</html>